import React from 'react';
import { Card, Row, Col, Table } from 'antd';
import { Link } from 'umi';
import Statistic from './compoments/Statistic';
import { Selector, CompanyDesc } from './compoments/SelectCompany';
import PlanChart from './compoments/chart/PlanChart';
import ProductCard from './compoments/ProductCard';
import styles from './index.less';

const strToNum = str => Number(str.replace('%', ''));

// const typeList = [
//     { key: 'org', title: '机构' },
//     { key: 'prd', title: '项目' }
// ];

const Work = ({ reportType, data, loading }) => {
    const columns = [
        {
            title: '部门',
            dataIndex: 'departmentName',
            key: 'departmentName',
            width: 135,
            render(text, record) {
                return (
                    <Link
                        title={text}
                        style={{
                            whiteSpace: 'nowrap',
                            overflow: 'hidden',
                            textOverflow: 'ellipsis',
                            display: 'block',
                            width: 100
                        }}
                        to={`/stat/workStat/workOverview/work/employee?companyId=${record.companyId}&departmentId=${record.departmentId}&reportType=${reportType}&evalFlag=1`}
                    >
                        {text}
                    </Link>
                );
            }
        },
        {
            title: reportType === 1 ? '上周工作' : '上月工作',
            dataIndex: 'lastWeek',
            key: 'lastWeek',
            align: 'center',
            sorter: (a, b) => strToNum(a.lastWeek) - strToNum(b.lastWeek)
        },
        {
            title: reportType === 1 ? '本周计划' : '本月计划',
            dataIndex: 'currentWeek',
            key: 'currentWeek',
            align: 'center',
            sorter: (a, b) => strToNum(a.currentWeek) - strToNum(b.currentWeek)
        }
    ];

    const [selectedCompanyId, setSelectedCompanyId] = React.useState(101);
    const [selectedType] = React.useState('org');

    // TODO： 接口返回太乱，无力吐槽
    const { perspCompanyTaskVOList = [] } = data;

    const rawCompany = perspCompanyTaskVOList.map(item => item.companyWorkloadStatisticsVO);
    const rawWork = perspCompanyTaskVOList.map(item => item.lastCompanyWorkloadStatisticsVO);
    const rawRank = perspCompanyTaskVOList.map((item, index) => {
        const final = item.departmentWorkloadSortVOList.map(_item => ({
            ..._item,
            companyId: rawCompany[index].companyId
        }));
        return final;
    });

    const computedCompany = rawCompany.map(item => {
        const { companyId, companyName, totalPeopleNum, evalPeopleNum } = item;
        return {
            ...item,
            title: companyName,
            id: companyId,
            totalPeopleNum,
            evalPeopleNum
        };
    });

    const currentWork = rawCompany.find(item => item.companyId === selectedCompanyId) || {};
    const lastWork = rawWork.find(item => item.companyId === selectedCompanyId) || {};

    const currentRank = rawRank.filter(item => item.some(_item => _item.companyId === selectedCompanyId)) || [];
    const computedRank =
        currentRank.length &&
        currentRank[0].map(item => {
            const { departmentName, planWorkloadRate, actualWorkloadRate } = item;
            return {
                ...item,
                departmentName,
                currentWeek: planWorkloadRate == null ? '--' : `${planWorkloadRate}%`,
                lastWeek: actualWorkloadRate == null ? '--' : `${actualWorkloadRate}%`
            };
        });

    const orgContent = () => (
        <>
            <CompanyDesc data={computedCompany} selected={selectedCompanyId} reportType={reportType} />
            <Row gutter={24}>
                <Col span={16}>
                    <div style={{ marginBottom: 16 }}>
                        <strong>{reportType === 1 ? '上周' : '上月'}</strong>
                    </div>
                    <Row>
                        <Col span={12}>
                            <Statistic
                                title="实际饱和度"
                                data={{
                                    left: (
                                        <strong>
                                            {lastWork.actualWorkloadRate || '--'}
                                            <span>%</span>
                                        </strong>
                                    ),
                                    top: (
                                        <span>
                                            实际
                                            <strong>{lastWork.actualPerCapitaWorkloadNum || '--'}</strong>小时
                                        </span>
                                    ),
                                    bottom: (
                                        <span>
                                            额定
                                            <strong>{lastWork.standardPerCapitaWorkloadNum || '--'}</strong>小时
                                        </span>
                                    )
                                }}
                            />
                        </Col>
                        <Col span={12}>
                            <div className={styles.commonTitle}>实际饱和度分布</div>
                            <PlanChart
                                data={[
                                    { name: '正常', num: lastWork.actualWorkloadNormalPeopleNum || 0 },
                                    { name: '不足', num: lastWork.actualWorkloadLackPeopleNum || 0 },
                                    { name: '超额', num: lastWork.actualWorkloadExcessPeopleNum || 0 }
                                ]}
                                query={{ companyId: selectedCompanyId, reportType, dateType: 1 }}
                                flagField="lastWorkloadFlag"
                            />
                        </Col>
                    </Row>
                    <div style={{ marginBottom: 16, marginTop: 24 }}>
                        <strong>{reportType === 1 ? '本周' : '本月'}</strong>
                    </div>
                    <Row>
                        <Col span={12}>
                            <Statistic
                                title="计划饱和度"
                                data={{
                                    left: (
                                        <strong>
                                            {currentWork.planWorkloadRate || '--'}
                                            <span>%</span>
                                        </strong>
                                    ),
                                    top: (
                                        <span>
                                            计划
                                            <strong>{currentWork.planPerCapitaStandardWorkloadNum || '--'}</strong>小时
                                        </span>
                                    ),
                                    bottom: (
                                        <span>
                                            额定
                                            <strong>{currentWork.standardPerCapitaWorkloadNum || '--'}</strong>小时
                                        </span>
                                    )
                                }}
                            />
                        </Col>
                        <Col span={12}>
                            <div className={styles.commonTitle}>计划饱和度分布</div>
                            <PlanChart
                                data={[
                                    { name: '正常', num: currentWork.planWorkloadNormalPeopleNum || 0 },
                                    { name: '不足', num: currentWork.planWorkloadLackPeopleNum || 0 },
                                    { name: '超额', num: currentWork.planWorkloadExcessPeopleNum || 0 }
                                ]}
                                query={{ companyId: selectedCompanyId, reportType, dateType: 1 }}
                                flagField="workloadFlag"
                            />
                        </Col>
                    </Row>
                </Col>
                <Col span={8}>
                    <div style={{ paddingBottom: 16 }}>
                        <strong>部门工作量饱和度排行</strong>
                    </div>
                    <div
                        style={{
                            padding: 16,
                            border: '1px solid #eee',
                            borderRadius: 4,
                            height: 500,
                            overflow: 'hidden'
                        }}
                    >
                        <Table
                            rowKey="departmentId"
                            columns={columns}
                            dataSource={computedRank}
                            pagination={false}
                            scroll={{ y: 400 }}
                        />
                    </div>
                </Col>
            </Row>
        </>
    );

    const { productQualityStatisticsVOList = [] } = data;
    const [product1 = {}, product2 = {}] = productQualityStatisticsVOList;
    const prdContent = () => (
        <Row gutter={24}>
            <Col span={12}>
                <ProductCard data={product1} />
            </Col>
            <Col span={12}>
                <ProductCard data={product2} />
            </Col>
        </Row>
    );

    return (
        <Card
            bordered={false}
            title={
                <Row type="flex" align="middle">
                    <div style={{ marginRight: 16 }}>企业工作管理</div>
                    {selectedType === 'org' && (
                        <Selector
                            defaultValue={computedCompany.some(item => item.id === 101) ? 101 : undefined}
                            data={computedCompany}
                            onChange={value => setSelectedCompanyId(value)}
                        />
                    )}
                </Row>
            }
            // style={{ marginTop: 24 }}
            loading={loading}
            // extra={
            //     <Radio.Group defaultValue="org" buttonStyle="solid">
            //         {typeList.map(item => (
            //             <Radio.Button
            //                 checked={selectedType === item.key}
            //                 key={item.key}
            //                 value={item.key}
            //                 onClick={() => setSelectedType(item.key)}
            //             >
            //                 {item.title}
            //             </Radio.Button>
            //         ))}
            //     </Radio.Group>
            // }
        >
            {selectedType === 'org' && orgContent()}
            {selectedType === 'prd' && prdContent()}
        </Card>
    );
};

export default Work;
